<template>
  <div class="infoBox">
    <information :infoData="infoData"/>
    <!-- 倒计时 -->
    <div class="border-r bg-47 border-1 mgt-10 boxS-i-4">
      <!-- <p class="color-f mg-2">{{ $t("detail.america_time") }}</p> -->
      <div class="font-26 fontW-7 font-f-ib color-af47 bd-b-1 pdtb-10">
        <interval :date="data"/>
      </div>
      <!-- 特点 -->
      <div class="flex mg-2">
        <div class="flex-1">
          <div class="color-af47 font-14 fontW-7 font-f-ib">{{ $t("detail.trait")}}</div>
          <p class="font-14 fontW-4 font-f-ib color-f mgt-10"
              v-for="(item, i) in decoded" :key="i">{{ item.trait_type }}
              <span class="mgl-13">{{item.value}}</span></p>
          <!-- <div>
            <div class="font-14 fontW-4 font-f-ib color-f mgt-10"
              v-for="(item, i) in decoded" :key="i">
              <div>{{ item.trait_type }}</div>
              <div class="mgl-13">{{item.value}}</div>
            </div>
          </div> -->
        </div>
        <!-- <div class="flex-1">
          <span class="color-af47 font-14 font-f-ib fontW-7">{{$t("detail.grade")}}</span>
          <p class="font-14 fontW-4 font-f-ib color-f mgt-10">{{ $t("detail.super") }}<span class="mgl-13">23/100</span></p>
          <p class="font-14 fontW-4 font-f-ib color-f mgt-10">{{ $t("detail.Motivation") }}<span class="mgl-13">11/100</span></p>
        </div> -->
      </div>
    </div>
    <!-- 描述 -->
    <div class="border-r bg-47 border-1 mgt-10 boxS-i-4 pd-20" style="min-height:140px">
      <p class="color-af47 fontW-7 font-20 font-f-ib">{{ $t("detail.describe") }}</p>
      <div class="describe_p  color-f fontW-7 font-18 mg-10 font-f-ib" v-if="showDesc">{{DescriptionInfo}}</div>
      <el-input class="mgt-10" type="textarea" :autosize="{ minRows: 2, maxRows: 3 }" v-model="DescriptionInfo" resize="none" ref="inputRef" @blur="childBlur" v-else></el-input>
    </div>
  </div>
</template>
<script>
import Interval from '../component/Interval'
import Information from '../component/Information'
export default {
  components: {
    Interval,
    Information
  },
  props: ['showDesc', 'infoData', 'from', 'makerOrder'],
  data () {
    return {
      value: '',
      DescriptionInfo: '',
      data: 1649556438,
      infoDataa: this.infoDataa,
      timer: null,
      showDesc_: false,
      decoded: []
    }
  },
  created () {
    // console.log(this.infoData, this.from, this.makerOrder, this.decoded, JSON.parse(this.decoded))
    console.log(this.infoData, this.from, this.makerOrder)
    const decoded = decodeURI(atob(this.infoData.Metadata))
    this.decoded = JSON.parse(decoded)
    this.data = this.makerOrder.endTime
    this.DescriptionInfo = this.infoData.Description
    this.showDesc_ = this.showDesc
  },
  watch: {
    showDesc: function (newVal, oldVal) {
      // console.log(newVal, oldVal, '------------------------')
      if (newVal === false) {
        this.getDescINfoFocus()
      }
    }
  },
  methods: {
    childBlur: function (e) {
      // console.log(this.showDesc, '-------------111')
      this.showDesc_ = !this.showDesc
      this.$emit('onAndOff', this.showDesc_)
      clearInterval(this.timer)
      this.changeDesc()
    },
    changeDesc: function () {
      this.$loading.show()
      const params = {
        // collectionAddress: this.$route.query.CollectionAddress,
        id: Number(this.$route.query.id),
        description: this.DescriptionInfo
      }
      this.$Api.Works.changeArtWorksDesc(params)
        .then((res) => {
          this.$loading.hide()
          console.log(res, 'changeArtWorksDesc', JSON.stringify(res))
          if (res && res.code === 200) {
          }
        })
        .catch((err) => {
          this.$loading.hide()
          console.log(err, 'changeArtWorksDesc', JSON.stringify(err))
        })
    },
    getDescINfoFocus: function () {
      // console.log('ok')
      this.timer = setInterval(() => {
        this.$refs.inputRef.focus()
      }, 0)
      // this.$refs.inputRef.focus()
    }
  }
}
</script>
<style lang="less" scoped>
.infoBox{
  width: 100%;
  .describe_p{
    height:100px;
    overflow: scroll;
    word-break: normal;
    white-space: pre-wrap;
    word-wrap:break-word;
  }
}
/deep/.el-textarea__inner{
  background: none;
  border: 3px dashed #323232;
  color: #d6d6d6;
  // style="width:400px;max-height:100px; overflow:scroll; word-wrap:break-word "
}
</style>
